<template>
  <div>
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <MBX
      level="商品管理"
      level2="商品列表"
    ></MBX>
    <br>
    <el-card>
      <!-- 搜索添加用户表单 -->
      <el-form>
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item>
              <el-input
                clearable
                v-model="page.query"
                placeholder="请输入搜索的姓名"
                @input="souuser"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="xr(page.query)"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item>
              <el-button
                type="primary"
                @click="dialogVisible=true"
              >添加用户</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- table列表 -->
      <el-table :data="list">
        <el-table-column
          type="index"
          label="#"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
        ></el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="电话"
        ></el-table-column>
        <el-table-column
          prop="role_name"
          label="角色"
        ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.mg_state"
                @change="zt(scope.row)"
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="edituser(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deluser(scope.row.id)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-s-tools"
                @click="shezhi(scope.row)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- table列表 -->
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页 -->
      <!-- 模态框 -->
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form
          label-width="100px"
          :model="addUser"
          :rules="rules"
          ref="addUserref"
        >
          <el-form-item
            label="用户名"
            prop="username"
          >
            <el-input v-model="addUser.username"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input v-model="addUser.password"></el-input>
          </el-form-item>
          <el-form-item
            label="邮箱"
            prop="email"
          >
            <el-input v-model="addUser.email"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="mobile"
          >
            <el-input v-model="addUser.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="adduser"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 模态框 -->
      <!-- 编辑模态框 -->
      <el-dialog
        title="编辑用户"
        :visible.sync="dialogVisible1"
        width="30%"
      >
        <el-form
          label-width="100px"
          :model="editUser"
        >
          <el-form-item
            label="用户名"
            prop="username"
          >
            <el-input
              :disabled="true"
              v-model="editUser.username"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="邮箱"
            prop="email"
          >
            <el-input v-model="editUser.email"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="mobile"
          >
            <el-input v-model="editUser.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button
            type="primary"
            @click="doedit"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑模态框 -->
      <!-- 设置模态框 -->
      <el-dialog
        title="分配角色"
        :visible.sync="dialogVisible2"
        width="25%"
      >
        <p>当前用户：{{shezhiuser.username}}</p>
        <p>当前角色：{{shezhiuser.role_name}}</p>
        <!-- 选择器 -->
        分配新角色：
        <el-select
          v-model="jueselist.id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in jueselist"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- 选择器 -->

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button
            type="primary"
            @click="shezhiok"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 设置模态框 -->
    </el-card>
  </div>
</template>

<script>
import {
  YongHu,
  BianJi,
  TianJia,
  ShanChu,
  ZhuangTai,
  JueSe,
  JueSeUser
} from "@/http/api";
import _ from "lodash";
export default {
  props: [],
  data() {
    //   邮箱自定义验证
    let useremail = (rule, value, callback) => {
      let emailreg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if (!emailreg.test(value)) {
        return callback(new Error("邮箱格式不正确"));
      }
      callback();
    };
    // 手机号自定义验证
    let useremobile = (rule, value, callback) => {
      let emailreg = /^1[3456789]\d{9}$/;
      if (!emailreg.test(value)) {
        return callback(new Error("手机号格式不正确"));
      }
      callback();
    };
    return {
      page: {
        pagesize: 5,
        pagenum: 1,
        query: ""
      },
      list: [],
      total: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        email: [
          { min: 3, max: 16, message: "长度在 3 到 5 个字符", trigger: "blur" },
          { validator: useremail, trigger: "blur" }
        ],
        mobile: [
          { min: 3, max: 16, message: "长度在 3 到 5 个字符", trigger: "blur" },
          { validator: useremobile, trigger: "blur" }
        ]
      },
      //   添加用户
      addUser: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      //   编辑用户
      editUser: {
        username: "",
        password: "",
        email: "",
        mobile: "",
        id: 0
      },
      userId: 0,
      shezhiuser: {},
      jueselist: [],
      shezhiid: 0
    };
  },
  created() {
    this.xr(this.page.query);
  },
  methods: {
    //   渲染用户列表
    async xr() {
      let res = await YongHu(this.page);
      this.list = res.users;
      console.log("用户列表", this.list);
      this.total = res.total;
    },
    handleSizeChange(item) {
      this.page.pagesize = item;
      console.log(item);
      this.xr();
    },
    handleCurrentChange(item) {
      this.page.pagenum = item;
      console.log(item);
      this.xr();
    },
    // 添加用户
    adduser() {
      this.$refs.addUserref.validate(async valid => {
        if (valid) {
          let res = await TianJia(this.addUser);
          console.log("添加用户", res);
          this.dialogVisible = false;
          this.xr();
        }
      });
    },
    // 删除用户
    deluser(id) {
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async item => {
          console.log("这是id", id);
          let res = await ShanChu(id);
          console.log("删除用户", res);
          this.xr();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 编辑用户回填到模态框
    edituser(row) {
      this.editUser.username = row.username;
      this.editUser.email = row.email;
      this.editUser.mobile = row.mobile;
      this.editUser.id = row.id;
      console.log("当前点击回填信息", row);
      this.dialogVisible1 = true;
    },
    // 编辑用户
    async doedit() {
      let res = await BianJi(this.editUser);
      console.log("编辑用户", this.editUser);
      this.dialogVisible1 = false;
      this.xr();
    },
    // 修改用户状态
    async zt(row) {
      console.log("状态", row);
      let res = await ZhuangTai(row.id, row.mg_state);
      console.log(res);
    },
    //设置
    async shezhi(row) {
      console.log("用户信息", row);
      let { username, role_name, id } = row;
      //   用户信息
      this.shezhiuser = { username, role_name, id };
      //   用户id
      console.log("用户信息", this.shezhiuser);
      this.dialogVisible2 = true;
      //   角色列表接口
      let res = await JueSe();
      this.jueselist = res;
      console.log("角色列表：", res);
    },
    // 确认设置
    async shezhiok() {
      let res = await JueSeUser(this.shezhiuser.id, this.jueselist.id);
      console.log("角色ID", this.jueselist.id);
      console.log("确认设置", res);
      this.dialogVisible2 = false;
      this.xr();
    },
    // 搜索调用接口
    souuser: _.debounce(function() {
      this.xr();
    }, 500)
  }
};
</script>

<style scoped >
</style>
